<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/type.css">
    <link rel="shortcut icon" href="./imgs/favicon.png" type="image/x-icon">
    <title>Family Health</title>
</head>

<body>
    <div id="app" v-cloak>

        <popup v-model="showSide">
            <side-nav></side-nav>
        </popup>

        <div class="load" v-if="loading">
            <img src="./imgs/loading.svg" alt="load">
        </div>

        <div class="container" v-else>

            <side-header @menu-click="handleOpenSideBar">
                <side-nav></side-nav>
            </side-header>

            <div class="container-main">
                <div class="main">

                    <div class="type-name">
                        <h1 class="type-name_h1">
                            {{type.name}}
                        </h1>
                    </div>

                    <ul>
                        <li v-for="item in list" :key="item.id">
                            <news-box :options="item"></news-box>
                        </li>
                    </ul>
                </div>

                <aside class="aside"></aside>
            </div>

        </div>

        <side-footer v-if="!loading"></side-footer>

        <cookies></cookies>

    </div>
</body>
<script src="./main.js"></script>
<script src="./mixins/index.js"></script>
<script src="./components/header.js"></script>
<script src="./components/footer.js"></script>
<script src="./components/popup.js"></script>
<script src="./components/nav.js"></script>

<script src="./components/newsBox.js"></script>
<script src="./components/cookies.js"></script>
<script src="./js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        mixins: [mixin],
        components: {
            SideHeader: header,
            SideFooter: footer,
            SideNav: nav,
            Popup: popup,
            newsBox: news,
            cookies: cookies
        },
        data() {
            return {
                type: {},
                list: []
            }
        },
        created() {
            const typeId = getQueryVariable('type') ? getQueryVariable('type') : 1
            this.type = nav.data().categories.find(item => item.id == typeId)

            this.handleFetchArticle()
        },
        mounted() {

        },
        methods: {
            handleFetchArticle() {
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 50,
                        blogTypeId: this.type.id,
                        siteId,
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.list = res.data
                        }
                        this.handleLoadingEnd()
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            },
        }
    })
</script>

</html>